<template>
    <div style='display:inline-block;' >
        <div v-if="controlType === 'add'">
        <el-input
            v-model.trim="value"
            :placeholder="`请输入${label}`"
            :disabled="disabled"
            :style="domCss"
            :maxlength="maxLength"
            :show-word-limit="showWordLimit"
            @input="Change('change')"
            @blur="Change('blur')"
            @focus="Change('focus')"
        ></el-input>
        <span v-if="afterTips" class="after_tips">{{afterTips}}</span>
        </div>
        <Txt v-else :defaultValue="defaultValue" />
    </div>
</template>

<script>
import Txt from './txt'
export default {
    components: {Txt},
    props: {
        label: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        domCss: {
            type: String,
            default: ''
        },
        showWordLimit: {
            type: Boolean,
            default: false
        },
        maxLength: {
            type: Number,
            default: 500
        },
        afterTips: {
            type: String,
            default: ''
        },
        defaultValue: {
            type: [String, Number],
            default: ''
        },
        controlType: {
            type: String,
            default: 'add'
        }
    },
    data() {
        return {
            value: ""
        };
    },
    watch: {
        defaultValue: {
            deep: true,
            immediate: true,
            handler: function(v) {
                this.value = v
            }
        }
    },
    methods: {
        Change(type) {
            this.$emit("EventHandler", type, this.$attrs.prop, this.value);
        }
    }
};
</script>

<style lang="scss" scoped>
.after_tips {
    font-size: 14px;
    color: #606266;
    margin-left: 8px;
}
</style>